<script>
  import $ from '../dfish.js'
  import {h} from 'vue'
  import WidgetAbs from './WidgetAbs.vue'  
  import ViewAbs from './ViewAbs.vue'  
  import SVGIcon from '../assets/SVGIcon.vue'
  import TemplatePreviewMedia from '../template/TemplatePreviewMedia.vue'
  import TemplateDateSheet from '../template/TemplateDateSheet.vue'
  

  export default {
    name: 'w-docview',
    mixins: [WidgetAbs, ViewAbs],
    provide() {
      return {
        providePubParent: null,
        provideBoxParent: null,
        provideRangeParent: null,
      }
    },
    beforeCreate() {
      $.docView = this
      $.q('#app').append('<div id=w-dfish-pops></div>')
    },
    methods: {
      el() {
        return document.getElementById('app')
      },
      getKey() {
        return null
      },
      previewVideo(src) {
        this.cmd({type: 'Dialog', template: TemplatePreviewMedia, data: {type: 'video', src}})
      },
      previewImage(imgs, options) {
        this.cmd({type: 'Dialog', template: TemplatePreviewMedia, data: {type: 'image', imgs, options}})
      },
      //dateOptions: {value, format, minValue, maxValue, success}
      dateSheet(dateOptions, dialogOptions) {
        this.exec({
          type: 'Dialog',
          template: TemplateDateSheet,
          width: '100%',
          height: '55%',
          position: 'b',
          cover: true,
          autoHide: true,
          data: dateOptions,
        }, null, dialogOptions)
      },
      html() {
        return [
          this.$slots.default && this.$slots.default(),
          this.html_pops(),
          h(SVGIcon),
        ]
      }
    },
    mounted() {
      if ($.x.debug) {
        $.q('body').click(e => {
          if (e.altKey) {
            let vm = $.vm(e.target)
            let t = vm && vm.wrapper().template
            
            if (t) {
              let b = $.bcr(vm.el())
              $.q('body').append(
                '<div id=dfish-debug style="position:absolute;border:2px dashed red;box-sizing:border-box;width:' +
                b.width + 'px;height:' + b.height + 'px;top:' + b.top + 'px;left:' + b.left + 'px"></div>')
              this.cmd({
                type: 'Alert',
                text: t,
                yes: () => $.q('#dfish-debug').remove()
              })
            }
          }
        })
      }
    }
  }
</script>
